<template>
	<view class="content">
		<view class="List">
			<view class="my">
				<view class="form-control">
					<view @click="changeShow">
						<view style="margin-left:30rpx;padding-bottom: 20rpx; font-size: 40rpx;">
							充值方式:(银行卡)
						</view>
						<view style="display: flex;align-items: center;margin-left: 30rpx;" v-if="card.bankName">
							<image :src="card.bankURL" style="width: 35rpx;height: 35rpx; margin-right: 10rpx;">
							</image>
							{{card.bankName}} {{card.bankNumbers}}
						</view>
					</view>
					<u--form labelPosition="left" ref="uForm">
						<view class="input">
							<view style="height: 50rpx; width: 50rpx;margin-left: 30rpx;font-size: 50rpx;">
								¥
							</view>
							<u-form-item borderBottom ref="item1">
								<u--input v-model="money" border="none" placeholder="充值金额" type='digit'></u--input>
							</u-form-item>
						</view>
					</u--form>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="login" @click="sure">确认充值</view>
		</view>


		<u-popup :show="show" @close="close1" :round="10" closeable closeIconPos="top-left">
			<view class="addCard">
				<view class="cardBox" @click="gateTo">
					<image style="width: 5vw;height: 5vw;" src="../../../static/addressAdd-icon.png" mode=""></image>
					<div>新增银行卡</div>
				</view>
			</view>
			<view class="radioView">
				<u-radio-group class="radioView" v-model="value" iconPlacement="right">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:name="item.bankName" @change="radioChange(item)">
						<view style="display: flex;align-items: center;">
							<image :src="item.bankURL" style="width: 35rpx;height: 35rpx; margin-right: 10rpx;"></image>
							{{item.bankName}} {{item.bankNumbers}}
						</view>
					</u-radio>
				</u-radio-group>
			</view>
		</u-popup>

		<u-popup :show="show2" mode="center" @close="close2" :round="10" closeable closeIconPos="top-left"
			:closeOnClickOverlay="false">
			<view style="height: 5vh;width: 90vw;padding-top: 10vw;">
				<view style="display: flex;">
					<view style="width: 10vw;height: 10vw;border: 1rpx solid black;margin-left: 4vw;"
						v-for="(item,index) in arr" :key="index">
						<uni-icons type="smallcircle-filled" size="20" v-show="item.id==1"
							style="line-height: 10vw;margin-left: 2.5vw;"></uni-icons>
					</view>
				</view>
			</view>
		</u-popup>

		<u-keyboard ref="uKeyboard1" mode="number" :show="show3" @change="valChange1" @backspace="backspace1"
			@close="close3" @cancel='cancel1' @confirm='confirm1' :showCancel="false" tips='请输入密码'
			:closeOnClickOverlay="false"></u-keyboard>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		toast
	} from "@/common.js"
	import {
		guard,
		getPersonBankList,
		payMoney
	} from "@/ww.js"
	export default {
		data() {
			return {
				show: false,
				show1: false,
				show2: false,
				show3: false,
				value: '',
				password: '',
				card: {
					bankName: '',
					bankNumbers: ''
				},
				radiolist1: [],
				money: '',
				arr: [{
					id: ''
				}, {
					id: ''
				}, {
					id: ''
				}, {
					id: ''
				}, {
					id: ''
				}, {
					id: ''
				}]
			}
		},
		onLoad() {
			guard('../../login/login')
			this.getPersonBank()

		},
		methods: {
			radioChange(n) {
				this.card = n
				this.close1()
			},
			close1() {
				this.show = false
			},
			hideBankCard(value) {
				if (value && value.length > 8) {
					return `${value.substring(0, 4)} ${"*".repeat(value.length - 8).replace(/(.{4})/g,`
					$1 `)}${value.length % 4 ? " " : ""}${value.slice(-4)}`;
				}
				return value;
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到money变量中，注意+=写法
				this.money += val;
			},
			// 退格键被点击
			backspace() {
				// 删除money的最后一个字符
				if (this.money.length) this.money = this.money.substr(0, this.money.length - 1);
			}, // 按键被点击(点击退格键不会触发此事件)
			valChange1(val) {
				// 将每次按键的值拼接到password变量中，注意+=写法
				if (this.password.length < 6) {
					this.password += val;
					for (var i = 0; i < this.password.length; i++) {
						this.arr[i].id = 1
					}
				} else {
					toast('密码过长')
				}
			},
			// 退格键被点击
			backspace1() {
				// 删除password的最后一个字符
				if (this.password.length) this.password = this.password.substr(0, this.password.length - 1);
				for (var j = this.password.length + 1; j > this.password.length; j--) {
					this.arr[j - 1].id = 0
				}
			},
			////输入框focus
			focus() {
				if (!this.cardNumber.name) {
					toast('请选择银行卡')
					return
				}
			},
			cancel() {
				this.money = ''
				this.close()
			},
			cancel1() {
				this.close3()
				this.password = ''
			},
			close() {
				this.show1 = false
			},
			confirm() {
				this.close()
			},
			confirm1() {
				if (this.password.length == 6) {
					payMoney({
						username: uni.getStorageSync("userInfo").username,
						password: this.password,
						money: this.money
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '充值成功',
								duration: 1000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '../mine'
								})
							}, 500)
						}
					})
				} else {
					toast('密码不对')
				}
				this.close3()
				this.close2()
			},
			close2() {
				this.password = ''
				this.show2 = false
				this.close3()
			},
			close3() {
				this.show3 = false
			},
			sure() {
				if (this.card.bankNumbers != '' && this.card.bankName != '') {
					if (this.money != '') {
						this.show2 = true
						this.show3 = true
					} else {
						toast('请先输入充值金额')
					}
				} else {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: '请选择银行卡'
					})
				}

			},
			changeShow() {
				this.show = true
				this.getPersonBank()
			},
			gateTo() {
				uni.navigateTo({
					url: './addCard'
				})
				this.show = false
			},
			getPersonBank() {
				getPersonBankList({
					username: uni.getStorageSync('userInfo').username
				}).then(res => {
					this.radiolist1 = res.data
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f0f0f0;
		width: 100%;
		height: 100vh;
		padding-top: 5vw;

		.bottom {
			width: 90vw;
			margin-left: 5vw;
			margin-bottom: 30rpx;

			.login {
				width: 100%;
				margin-top: 40rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 20rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				background-color: #359cff;
			}

		}

		a {
			text-decoration: none;
		}

		::v-deep .uni-checkbox-input {
			width: 30rpx;
			height: 30rpx;
			margin-bottom: 10rpx;
		}
	}

	.input {
		display: flex;
		align-items: center;
	}

	::v-deep .u-form-item {
		width: 70vw;
	}

	.addCard {
		width: 100%;
		margin: 9vw 0 0;

		.cardBox {
			width: 40%;
			display: flex;
			margin: 0 auto;
			justify-content: center;
			align-items: center;

			>div {
				font-size: 3.5vw;
				margin: 0 0 0 1vw;
			}
		}
	}

	.radioView {
		width: 98%;
		height: 20vh;
		margin: 3vw auto;
		overflow-y: auto
	}


	.List {
		width: 100vw;
		overflow: auto;

		.my {
			width: 90vw;
			margin: 1.5vh auto;
			padding: 3vw 0;
			background: #fff;
			border-radius: 15rpx;
			box-shadow: 0px 5px 10px #888888;
		}
	}

	::v-deep .u-radio-group {
		display: block;
		margin-left: 3vw;
		margin-right: 3vw;
	}

	::v-deep .u-radio {
		height: 15vw;
	}

	::v-deep .u-form-item__body {
		width: 70vw;
		padding-bottom: 5rpx;
	}

	::v-deep .u-code-input {
		width: 80vw;
		margin-left: 10vw;
	}

	::v-deep .u-safe-bottom {
		padding: 20rpx;
	}

	::v-deep .u-radio__icon-wrap {
		margin-right: 4vw !important;
	}
</style>